<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <img style="width: 300px;height: 300px;" src="https://passport.bilibili.com/x/passport-tv-login/h5/qrcode/auth?auth_code=e578393235f82a6a49bc1347b1f40601" alt="">
    <div class="container">
      <div class="from-item">
        <img src="../html/image/user.png" class="icon" alt="">
        <input type="number" class="phone" placeholder="请输入手机号" />
      </div>
      <div class="from-item">
        <div id="captcha"></div>
      </div>
      <div class="from-item">
        <img src="../html/image/code.png" class="icon" alt="">
        <input v-model="code" class="code-input" maxlength="4" placeholder="请输入验证码" placeholder-style="color: #999" type="number" />

        <div class="code-btn-text">
          获取验证码
        </div>
      </div>
    </div>
    <button class="btn">点击</button>

    <!--    
    <button class="btn2">获取验证码</button>
    <div>
      <label>4. 验证：</label>
      <div id="captcha">
        <div id="text">
          请先生成
        </div>
        <div id="wait" class="show">
          <div class="loading">
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
            <div class="loading-dot"></div>
          </div>
        </div>
      </div>
    </div>
    <div id="btn-result" class="btn">5. 结果</div> -->
  </body>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/gt.js"></script>
  <script type="text/javascript" src="./js/uni.webview.1.5.6.js"></script>
  <script>
    document.addEventListener('UniAppJSBridgeReady', function() {
      uni.webView.getEnv(function(res) {
        console.log('当前环境：' + JSON.stringify(res));
      });
      // uni.webView.navigateTo(...)
    });
    // const btn = document.querySelector('.btn');
    // btn.addEventListener('click', () => {
    //   console.log('click', uni);
    //   uni.postMessage({
    //     data: {
    //       action: 'message'
    //     }
    //   });
    // })


    const codeParams = {
      tel: '',
      cid: 86,
      login_session_id: '',
      recaptcha_token: '',
      gee_validate: '',
      gee_seccode: '',
      channel: 'bili',
      buvid: '',
      local_id: '',
      statistics: ''
    }



    $('.btn').on('click', () => {
      handleGetcaptcha()
    })


    function handleGetcaptcha() {
      $.get('https://passport.bilibili.com/x/passport-login/captcha?source=main_web', (res) => {
        console.log('成功:', JSON.stringify(res));
        codeParams.recaptcha_token = res.data.token;
        codeParams.gee_challenge = res.data.geetest.challenge;
        createCaptcha(res.data.geetest.gt, res.data.geetest.challenge)
      }).fail((jqXHR, textStatus, errorThrown) => {
        console.error('请求失败:', textStatus, errorThrown);
      });
    }

    // 发生验证码
    function seedCode() {
      $.get('https://passport.bilibili.com/x/passport-login/captcha?source=main_web', (res) => {
        console.log('成功:', JSON.stringify(res));
        const challenge = res.data.geetest.challenge;
        const gt = res.data.geetest.gt;
        createCaptcha(gt, challenge)
      }).fail((jqXHR, textStatus, errorThrown) => {
        console.error('请求失败:', textStatus, errorThrown);
      });
    }

    function createCaptcha(gt, challenge) {
      initGeetest({
        // 以下 4 个配置参数为必须，不能缺少
        gt: gt,
        challenge: challenge,
        offline: false, // 表示用户后台检测极验服务器是否宕机
        new_captcha: true, // 用于宕机时表示是新验证码的宕机

        product: "popup", // 产品形式，包括：float，popup
        width: "300px",
        https: true

        // 更多前端配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
      }, handler);
    }

    var handler = function(captchaObj) {
      captchaObj.appendTo('#captcha');
      captchaObj.onReady(function() {
        $("#wait").hide();
      });
      // 点击获取验证码
      $('.code-btn-text').on('click', () => {
        const phone = $('.phone')[0].value;
        if (!phone) {
          return alert('请输入手机号码')
        }
        var result = captchaObj.getValidate();
        if (!result) {
          return alert('请完成验证');
        }
        codeParams.tel = $('.phone')[0].value;

        console.log('result', result);
        codeParams.gee_validate = result.geetest_validate;
        codeParams.gee_seccode = result.geetest_seccode + '|jordan';
      })

      // 更多前端接口说明请参见：http://docs.geetest.com/install/client/web-front/
    };
  </script>
</html>